import type { LoaderFunctionArgs } from "react-router";
import { getZigbeeDevices } from "~/lib/server";
import type { Route } from "./+types/zigbee";



interface zigbeeDevice {
    sn: string;
    vendor: string;
    type: string;
}

export async function clientLoader({ params }: LoaderFunctionArgs) {
    const devices = await getZigbeeDevices();


    return { devices };

}

export default function Zigbee({ loaderData }: Route.ComponentProps) {


    const { devices } = loaderData

    return (
        <>
            <h2 className="my-2 text-3xl">zigbee 设备</h2>

            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" >

                {devices.map((item) => (
                    <DeviceCard device={item} key={item.sn} />
                ))}

            </div>


        </>
    );
}



function DeviceCard({device }: {device:zigbeeDevice}) {



    return (
        <>

            <div className="bg-white shadow-md rounded px-4 py-2 hover:bg-gray-100">

                <h3 className="font-bold text-xl mb-2">{device.sn}</h3>
                <p className="text-gray-700 text-base">{device.type}</p>
                <p className="text-gray-700 text-base">{device.vendor}</p>
            </div >

        </>

    );
}

